/*
 * @Description: step2-用户信息填写栏：姓名、电话
 * @Author: ziwei.ma
 * @Date: 2019-07-12 11:26:30
 * @Last Modified by: ziwei.ma
 * @Last Modified time: 2019-08-28 17:27:08
 */

<template>
  <div class="user-info-warpper flex-v fontsize32">
    <input
      maxlength="10"
      class="public-style"
      type="text"
      placeholder="请输入联系人姓名（必填）"
      v-model="userName"
    >
    <input
      maxlength="11"
      class="public-style"
      type="tel"
      placeholder="请输入联系手机号码（必填）"
      v-model="userPhone"
    >
    <!-- 复选框 -->
    <div class="select-contact-way flex-v">
      <div>请选择备选联系方式</div>
      <div class="checkbox flex-h flex-vc">
        <label class="flex-h flex-vc checkbox-one"><input
            type="checkbox"
            v-model="isOther"
          >其它联系人</label>
        <label class="flex-h flex-vc"><input
            type="checkbox"
            v-model="isEmail"
          >其它联系方式</label>
      </div>
    </div>
    <!-- 备用联系人 -->
    <div v-show="isOther">
      <input
        maxlength="10"
        class="public-style"
        type="text"
        placeholder="请输入备选联系人姓名（必填）"
        v-model="secondUserName"
      >
      <input
        maxlength="11"
        class="public-style"
        type="tel"
        placeholder="请输入备选联系手机号码（必填）"
        v-model="secondUserPhone"
      >
    </div>
    <input
      v-show="isEmail"
      class="public-style"
      type="text"
      placeholder="请输入邮箱地址（必填）"
      v-model="eMail"
    >
    <!-- 装饰样式 -->
    <!-- 底部两个圆点 -->
    <div class="dot-warpper flex-h flex-vc flex-hsb">
      <div class="dot baseBgColorNoActive"></div>
      <div class="dot baseBgColorNoActive"></div>
    </div>
    <!-- 底部两个竖条 -->
    <div class="line-warpper flex-h flex-hsb">
      <div class="line"></div>
      <div class="line"></div>
    </div>
  </div>
</template>

<script>
import { verifyUserName, verifyUserPhone, verifySecondUser, verifyEMail } from '../utils/formVerify'
export default {
  data() {
    return {

    }
  },
  computed: {
    userName: {
      get() {
        return this.$store.getters.userName
      },
      set(val) {
        this.$store.dispatch('fetchUserName', val)
      }
    },
    userPhone: {
      get() {
        return this.$store.getters.userPhone
      },
      set(val) {
        this.$store.dispatch('fetchUserPhone', val)
      }
    },
    // 第二联系人勾选状态
    isOther: {
      get() {
        return this.$store.getters.isSecondUser
      },
      set(val) {
        this.$store.dispatch('fetchIsSecondUser', val)
      }
    },
    // 其他联系方式勾选状态（邮箱）
    isEmail: {
      get() {
        return this.$store.getters.isEmail
      },
      set(val) {
        this.$store.dispatch('fetchIsEmail', val)
      }
    },
    // 禁选状态
    // isOtherDisabled() {
    //   return this.isOther && !this.isEmail
    // },
    // isEmailDisabled() {
    //   return !this.isOther && this.isEmail
    // },
    secondUserName: {
      get() {
        return this.$store.getters.secondUserName
      },
      set(val) {
        this.$store.dispatch('fetchSecondUserName', val)
      }
    },
    secondUserPhone: {
      get() {
        return this.$store.getters.secondUserPhone
      },
      set(val) {
        this.$store.dispatch('fetchSecondUserPhone', val)
      }
    },
    eMail: {
      get() {
        return this.$store.getters.eMail
      },
      set(val) {
        this.$store.dispatch('fetchEMail', val)
      }
    }
  },
  methods: {
    // 检验用户信息
    _verifyUserInfo() {
      return Promise.all([
        verifyUserName(this.$store.getters.userName),
        verifyUserPhone(this.$store.getters.userPhone),
        verifySecondUser(this.$store.getters.isSecondUser, this.$store.getters.secondUserName, this.$store.getters.secondUserPhone),
        verifyEMail(this.$store.getters.isEmail, this.$store.getters.eMail)
      ])
    }
  },
  watch: {
    isOther(val) {
      if (!val) {
        this.$store.dispatch('fetchSecondUserName', '')
        this.$store.dispatch('fetchSecondUserPhone', '')
      }
    },
    isEmail(val) {
      if (!val) {
        this.$store.dispatch('fetchEMail', '')
      }
    }
  }
}
</script>

<style scoped>
.user-info-warpper {
  position: relative;
  width: 686px;
  min-height: 492px;
  border-radius: 8px;
  background-color: #fff;
  padding: 40px 18px 60px;
  margin: 16px 0 32px;
  box-sizing: border-box;
}
.public-style {
  height: 84px;
  /* line-height: 84px; */
  width: 100%;
  padding: 20px 32px;
  border-radius: 8px;
  margin-bottom: 16px;
  outline: none;
  border: 0px;
  background-color: #f9f9f9;
  box-sizing: border-box;
}
/* 复选框 */
.select-contact-way {
  height: 160px;
  margin-bottom: 16px;
  padding: 4px 32px;
  box-sizing: border-box;
}
.select-contact-way > div {
  margin: 16px 0;
}
.checkbox {
  height: 44px;
  line-height: 44px;
  color: #666666;
}
.checkbox > label > input {
  height: 44px;
  margin-right: 12px;
}
.checkbox-one {
  margin-right: 56px;
}
.select-contact-way input[type='checkbox'] {
  background: url('../assets/CheckBox.png') no-repeat center;
  background-size: 33px;
  width: 33px;
  height: 33px;
}
.select-contact-way input[type='checkbox']:checked {
  background: url('../assets/CheckedBox.png') no-repeat center;
  background-size: 33px;
  width: 33px;
  height: 33px;
}
/* 装饰 */
/* 两个圆点 */
.dot-warpper {
  width: 650px;
  position: absolute;
  bottom: 20px;
}
.dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  margin: 0 30px;
}
/* 两个竖条 */
.line-warpper {
  position: absolute;
  width: 650px;
  bottom: -60px;
}
.line {
  width: 10px;
  height: 90px;
  background-color: #e7eff8;
  border-radius: 5px;
  margin: 0 34px;
}
</style>
